<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, height=1330, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <script type="text/javascript" src="./tooljs/jquery.js"></script>
    <script type="text/javascript" src="js/headModule.js"></script>
    <script type="text/javascript" src="js/bottomModule.js"></script>
    <script type="text/javascript" src="js/swipeslider.min.js"></script>
    <link rel="stylesheet" href="./css/homepage.css">
    <!--<link rel="stylesheet" href="./css/lunbotu.css">-->
    <link rel="stylesheet" href="./css/swipeslider.css">
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div[name="middleModule"]{
        padding-top: 48px;
        padding-bottom: 98px;
        overflow-y: auto;
    }
    div[name="benzhoudapai"]{
        height: 400px;
        display: block;
        background-color: #ffffff;
    }
    div[name="benzhoudapaiHead"]{
        height: 100px;
    }
    div[name="pingtaituijian"]{
        height: 100px;
    }
    /*.box img{*/
        /*height:250px;*/
        /*width: 250px;*/
        /*display:block;*/
        /*margin:0 .09259rem;*/
    /*}*/
    .boxItem img{
        height:200px;
        width: 200px;
        display:block;
        /*margin:0 .09259rem;*/
        /*margin-left:15px;*/
    }
    .boxItem{
        height:300px;
        width: 200px;
        display:block;
        margin-left: 25px;
        margin-right: 25px;
        display: block;
        float: left;
    }
    .boxContext{
        font-size: 20px;
        color: #7f7979;
        margin-top:10px;
    }
    .boxContextLeft{
        margin-left: 10px;
    }
    .boxContextRight{
        margin-left: 10px;
    }
    .title span{
        font-size: 26px;
        color: #333333;
        height: 50px;
        margin-left:50px
    }
    .title{
        margin-top:10px;
    }
    .tuijianContextItem{
        position: relative;
        width: 340px;
        height: 340px;
        float:left;
        margin-left:20px;
    }
    .tuijianContextItem img{
        height:340px;
        width: 340px;
    }
    .tuijianContextItemText {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 340px;
        height: 54px;
        background: #000;
        font-size: 26px;
        color:#fffefe;
    }
    .tuijianContextItemTextLeft{
        display: -webkit-inline-flex;
        width: 50%;
        margin-top: 12px;
        margin-left: 15px;
    }
    .tuijianContextItemTextRight{
        float:right;
        margin-top: 12px;
        margin-right: 20px;
    }
</style>
<body style="background-color: #fbfafa;">
<div name="homepage">
    <div name="headModule">
    </div>
    <div name="middleModule">
         <div name="lunbotu">
             <figure id="full_feature" class="swipslider">
                 <ul class="sw-slides">
                     <li class="sw-slide">
                         <img src="images/1.jpg" alt="Summer beach concept">
                     </li>
                     <li class="sw-slide">
                         <img src="images/1.jpg" alt="Lang from Yie Ar Kung Fu">
                     </li>
                     <li class="sw-slide">
                         <img src="images/1.jpg" alt="Tiny Tina">
                     </li>
                     <li class="sw-slide">
                         <img src="images/1.jpg" alt="Tiny Tina from Borderlands 2">
                     </li>
                     <li class="sw-slide">
                         <img src="images/1.jpg" alt="Redhead girl">
                     </li>
                 </ul>
             </figure>
    </div>

        <div name="benzhoudapai">
        <div name="benzhoudapaiHead">
            <img src="images/icons/home_icon_brand@2x.png" style="margin-top: 20px;margin-left: 25px;float: left">
            <span style="font-size: 28px;color:#f5c607;display: inline;float: left;margin-top: 30px;margin-left: 25px;">本周大牌</span>
        </div>
        <div class="box">
            <div class="boxItem">
                <img src="images/2.jpg" alt="">
                <div class="title">
                    <span>都市丽人</span>
                </div>
                <div class="boxContext">
                    <span class="boxContextLeft">销量：5.6k</span>
                    <span class="boxContextRight">收藏3k</span>
                </div>
            </div>

            <div class="boxItem">
                <img src="images/2.jpg" alt="">
                <div class="title">
                    <span>都市丽人</span>
                </div>
                <div class="boxContext">
                    <span class="boxContextLeft">销量：5.6k</span>
                    <span class="boxContextRight">收藏3k</span>
                </div>
            </div>

            <div class="boxItem">
                <img src="images/2.jpg" alt="">
                <div class="title">
                    <span>都市丽人</span>
                </div>
                <div class="boxContext">
                    <span class="boxContextLeft">销量：5.6k</span>
                    <span class="boxContextRight">收藏3k</span>
                </div>
            </div>
        </div>
    </div>

         <div name="pingtaituijian" style="background-color: #fbfafa">
             <div name="tuijianHead">
                 <div name="tuijianHeadLeft" style="display: block;height: 100px;width:50%;float: left">
                     <img src="images/icons/home_icon_recommend@2x.png" style="margin-top: 25px;margin-left: 25px;float: left">
                     <span name="tuijianText" style="font-size:28px;color: #f34B91;float: left;margin-top:30px;margin-left:20px;">平台推荐</span>
                 </div>
                 <div name="tuijianHeadRight" style="display: block;height: 100px;width:50%;float: right">
                     <img src="images/icons/list_into@2x.png" style="float: right;margin-top:30px;">
                     <img src="images/icons/list_into@2x.png" style="float: right;margin-top:30px;">
                     <span name="tuijianText" style="font-size:24px;float: right;margin-top:30px;">更多</span>
                 </div>
             </div>
             <div name="tuijianContext">
                 <div class="tuijianContextItem">
                     <img src="images/timg_140X140.jpg">
                     <div class="tuijianContextItemText">
                         <span class="tuijianContextItemTextLeft">Aimy 爱慕</span>
                         <span class="tuijianContextItemTextRight">￥168</span>
                     </div>
                 </div>
             </div>
         </div>
    </div>
    <div name="bottomModule">
    </div>
</div>
<script src="./js/lunbotu.js"></script>
<script type="text/javascript">
    var headmodule = headmodal("商城首页","./images/icons/nav_menu@2x.png","./images/icons/nav_news@2x.png","navIcon","chatIcon");
    // document.getElementById("headModule").append(headmodal());
    $('div[name="headModule"]').append(headmodule);
    var bottommodule = bottomModal("./images/icons/tab_home_select@2x.png","./images/icons/tab_classify@2x.png","./images/icons/tab_publish@2x.png","./images/icons/tab_information@2x.png","./images/icons/tab_my@2x.png")
    $('div[name="bottomModule"]').append(bottommodule);
    $(window).load(function() {
        $('#full_feature').swipeslider();
    })

    $('img[name="img2"]').click(function () {
        window.location.href="html/classifyPage.html";
    })
    $('img[name="img4"]').click(function () {
        window.location.href="html/informationCenterPage.html";
    })
    $('img[name="img5"]').click(function () {
        window.location.href="html/personalCenterPage.html";
    })
</script>
</body>
</html>